<template>
  <div>
    <div id="container"></div>
    <div id="panel">
      <!--        <input type="text" v-model="inputLocation" />-->
      <!--        <el-input type="button" class="btn" value="转换为地址" @click="convert" />-->
      <el-button type="primary" @click="convert" size="small">刷新地址</el-button>
      <el-input type="text" disabled :model-value="address"  size="small"></el-input>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted,ref ,onBeforeMount,defineProps,useAttrs} from 'vue';

// 这里设置一个变量来接收你的腾讯地图 API 密钥，你需要将真实的密钥赋值给这个变量
const mapKey = 'BG7BZ-ZN3K4-APUU7-FPDV6-CSJ3Z-MIFFK';
const mapScriptUrl = `https://map.qq.com/api/gljs?v=1.exp&libraries=service&key=${mapKey}`;
let map: any;
let geocoder: any;
let markers: any;
let inputLocation = '37.986785, 116.301012';
const address = ref('');
const  attrs = useAttrs();


// 地图初始化函数
onMounted(() => {
  // 创建一个 script 标签来动态加载腾讯地图 API
  const script = document.createElement('script');
  script.charset = 'utf-8';
  script.src = mapScriptUrl;
  document.head.appendChild(script);

  // 等待地图 API 加载完成后初始化地图
  script.onload = () => {
    map = new (window as any).TMap.Map('container', {
      zoom: 14,
      center: new (window as any).TMap.LatLng(22.986785,116.301012),
    });
    geocoder = new (window as any).TMap.service.Geocoder();
    markers = new (window as any).TMap.MultiMarker({
      map: map,
      geometries: [],
    });
  };
});

// 根据经纬度获取地址
function convert() {
  console.log(attrs.customAttr);
  // markers.setGeometries([]);
  let inputLocation = attrs.customAttr;
  const input = inputLocation.split(',');
  const location = new (window as any).TMap.LatLng(Number(input[0]), Number(input[1]));
  map.setCenter(location);
  markers.updateGeometries([
    {
      id: 'main',
      position: location,
    },
  ]);
  geocoder
      .getAddress({ location: location })
      .then((result) => {
        address.value = result.result.address;
        console.log(address.value);
      });
}


//获得折线图（）

</script>

<style scoped>
html,
body {
  height: 100%;
  margin: 0px;
  padding: 0px;
  overflow: hidden;
}

#container {
  position: relative;
  width: 100%;
  height: 100%;
}

#panel {
  position: absolute;
  background: #fff;
  width: 200px;
  padding: 20px;
  z-index: 9999;
  top: 10px;
  left: 10px;
}
</style>